<style type="text/css">
    div#homeContainer div{
        width: 50%;
        height: 200px;
        box-sizing: border-box;
        float: left;
        border-radius: 5px;
        padding: 5px;
    }
    mainMenu{
        border: 1px solid #bbb;
        width: 100%;
        height: 100%;
        display: block;
        border-radius: 5px;
        vertical-align: middle
    }
</style>
<script type="text/javascript">
    $('document').ready(function(){
        $('mainmenu').on('touchstart', function(){
            $(this).css('background-color','#059fe7');
        }).on('touchend',function(){
            $(this).css('background-color','');
        }).on('touchmove',function(){
            $(this).css('background-color','');
        }).on('mousedown',function(){
            $(this).css('background-color','#059fe7');
        }).on('mouseup',function(){
            $(this).css('background-color','');
        });
    })
</script>
<div id="homeContainer">
    <div>
        <mainMenu>
            <table style="width: 100%;height: 100%;">
                <tr>
                    <td style="text-align: center;">เข้าสู่ระบบ</td>
                </tr>
            </table>            
        </mainMenu>
    </div>
    <div>
        <a href=".?page=memberList">
            <mainMenu>
                <table style="width: 100%;height: 100%;">
                    <tr>
                        <td style="text-align: center;">เลือกเกษตรกร</td>
                    </tr>
                </table>            
            </mainMenu>
        </a>
    </div>
    <div>
        <a href=".?page=costGeneral">
            <mainMenu>
                <table style="width: 100%;height: 100%;">
                    <tr>
                        <td style="text-align: center;">ต้นทุนทั่วไป</td>
                    </tr>
                </table>            
            </mainMenu>
        </a>
    </div>
    <?php
        $query="
            select      *
            from        phase
            order by    phaseID
            ";
        $result=  $mysqli->query($query);
        $numrows=  $result->num_rows;
        $i=0;
        while($i<$numrows){
            $row=  $result->fetch_array(MYSQLI_ASSOC);
            ?>    
    <div>
        <a href=".?page=costPhase&phaseID=<?=$row["phaseID"]?>">
            <mainMenu>
                <table style="width: 100%;height: 100%;">
                    <tr>
                        <td style="text-align: center;">
                            <img src="images/rice<?=$row["phaseID"]?>.png" style="max-height: 170px;">
                        </td>
                        <td><?=$row["phaseName"]?></td>
                    </tr>
                </table>            
            </mainMenu>
        </a>
    </div>
                <?php
            $i++;
        }
    ?>
    <div>
        <a href=".?page=costAFPhase">
            <mainMenu>
                <table style="width: 100%;height: 100%;">
                    <tr>
                        <td style="text-align: center;">
                            <img src="images/riceProduction.png" style="max-height: 170px;max-width: 114px;">
                        </td>
                        <td>ผลตอบแทน</td>
                    </tr>
                </table>            
            </mainMenu>
        </a>
    </div>
</div>